// https://css-tricks.com/using-svg/

$encoding-reference: (('<', '%3C'), ('>', '%3E'), ('"', "'"), ('#', '%23'), ('&', '%26'));

/// Replace `$search` with `$replace` in `$string`
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// @function encodecolor($string) {
// 	@if type-of($string) == 'color' {
//         $hex: str-slice(ie-hex-str($string), 4);
//         $string:unquote("#{$hex}");
//     }
//     $string: '%23' + $string;
// 	@return $string;
// }

@function svg-encode($svg) {
  @each $char, $encoded in $encoding-reference {
    $svg: str-replace($svg, $char, $encoded);
  }
  @return 'data:image/svg+xml,' + $svg;
}

// .gf-icon {
//   width: 13px;
//   height: 13px;
//   background-size: 13px;
//   background-repeat: no-repeat;
//   background-position: center;
//   $encoded-color : encodecolor($icon_color);
//   &-grid {
//     @extend .gf-icon;
//     $source : "data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='border-none' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' class='svg-inline--fa fa-border-none fa-w-14'%3E%3Cpath fill='currentColor' d='M240 224h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-288 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96 192h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-96h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-192h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM240 320h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-192h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-96 288h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm96-384h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM48 224H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-96H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-96H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm96 0h-32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z' class=''%3E%3C/path%3E%3C/svg%3E";
//     background-image: url(str-replace($source,'currentColor',$encoded-color));
//   }
// }

// MARGIN BETWEEN ICONS
.gf-icon-margin {
  margin-right: 1px;
  // margin-left: 1px;
  margin-top: 7px;
}

.gf-icon-clickable {
  cursor: pointer;
}

.gf-icon-withcontent {
  float: inline-end;
  text-align: left;
  justify-content: center;
  margin-bottom: 7px;
  float: right;
}

.gf-icon-border {
  border-radius: 5px !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid;
}

.gf-icon-selected {
  @extend .gf-icon-border;
}

.gf-icon-action-nocolor {
  @extend .gf-icon-clickable;
  // transition: 0.2s ease;
  &:hover {
    @extend .gf-icon-action-nocolor;
    transform: scale(1.3);
  }
}

.gf-chevron-rotate {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.gf-chevron-init {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

// .gf-body-hide {  
//   opacity: 0;
//   max-height: 0;
//   overflow: hidden;
//   transition: max-height 0.2s ease-out;
//   display:none;
// }

// .gf-body-show {
//   opacity: 1;
//   transition: max-height 0.2s ease-out;
// }

.gf-chevron-rotate,
.gf-chevron-init,
.gf-body-hide,
.gf-body-show {
  $tr_time : 200ms;
  -webkit-transition: $tr_time ease all;
  -moz-transition: $tr_time ease all;
  -o-transition: $tr_time ease all;
  transition: $tr_time ease all;
}

.gf-icon-action {
  @extend .gf-icon-clickable;
  transition: 0.2s ease;
  &:hover {
    @extend .gf-icon-action;
    filter: $icon_action_filter;
    transform: scale(1.3);
    transition: 0.2s ease;
  }
}

.gf-icon-24 {
  width: 24px !important;
  height: 24px !important;
}

//
// ICONS
//
.gf-icon {
  @extend .gf-icon-margin;
  width: 16px;
  height: 16px;
  // padding : 1px;
  // background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  $encoded-color: $icon_color;

  $icon-name: 'scale-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    // $encoded-color : $icon_color;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0M 535 50C 535 50 650 165 650 165C 665 180 668 202 661 219C 654 236 636 250 615 250C 615 250 550 250 550 250C 550 250 550 450 550 450C 550 450 750 450 750 450C 750 450 750 385 750 385C 750 364 764 346 781 339C 787 337 794 335 802 336C 814 336 826 341 835 350C 835 350 950 465 950 465C 969 484 969 516 950 535C 950 535 835 650 835 650C 820 665 798 668 781 661C 764 654 750 636 750 615C 750 615 750 550 750 550C 750 550 550 550 550 550C 550 550 550 750 550 750C 550 750 615 750 615 750C 636 750 654 764 661 781C 668 798 665 820 650 835C 650 835 535 950 535 950C 516 969 484 969 465 950C 465 950 350 835 350 835C 335 820 332 798 339 781C 346 764 364 750 385 750C 385 750 450 750 450 750C 450 750 450 550 450 550C 450 550 250 550 250 550C 250 550 250 615 250 615C 250 636 236 654 219 661C 202 668 180 665 165 650C 165 650 50 535 50 535C 31 516 31 484 50 465C 50 465 165 350 165 350C 174 341 186 336 198 336C 206 335 213 337 219 339C 236 346 250 364 250 385C 250 385 250 450 250 450C 250 450 450 450 450 450C 450 450 450 250 450 250C 450 250 385 250 385 250C 364 250 346 236 339 219C 332 202 335 180 350 165C 350 165 465 50 465 50C 474 40 487 36 500 36C 513 36 526 40 535 50C 535 50 535 50 535 50" transform="rotate(90,500,500)"/></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
    // &-action  {
    //   @extend .gf-icon-#{$icon-name};
    //   @extend .gf-icon-action;
    //   // $encoded-color : $icon_action;
    //   // content: url(svg-encode(str-replace($source,'currentColor',$encoded-color)));
    // }
  }

  $icon-name: 'scale-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 535 50C 535 50 650 165 650 165C 665 180 668 202 661 219C 654 236 636 250 615 250C 615 250 550 250 550 250C 550 250 550 450 550 450C 550 450 750 450 750 450C 750 450 750 385 750 385C 750 364 764 346 781 339C 787 337 794 335 802 336C 814 336 826 341 835 350C 835 350 950 465 950 465C 969 484 969 516 950 535C 950 535 835 650 835 650C 820 665 798 668 781 661C 764 654 750 636 750 615C 750 615 750 550 750 550C 750 550 550 550 550 550C 550 550 550 750 550 750C 550 750 615 750 615 750C 636 750 654 764 661 781C 668 798 665 820 650 835C 650 835 535 950 535 950C 516 969 484 969 465 950C 465 950 350 835 350 835C 335 820 332 798 339 781C 346 764 364 750 385 750C 385 750 450 750 450 750C 450 750 450 550 450 550C 450 550 250 550 250 550C 250 550 250 615 250 615C 250 636 236 654 219 661C 202 668 180 665 165 650C 165 650 50 535 50 535C 31 516 31 484 50 465C 50 465 165 350 165 350C 174 341 186 336 198 336C 206 335 213 337 219 339C 236 346 250 364 250 385C 250 385 250 450 250 450C 250 450 450 450 450 450C 450 450 450 250 450 250C 450 250 385 250 385 250C 364 250 346 236 339 219C 332 202 335 180 350 165C 350 165 465 50 465 50C 474 40 487 36 500 36C 513 36 526 40 535 50C 535 50 535 50 535 50"/></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'empty';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="currentColor" d=""></path></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'grid';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 32h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM32 32H16A16 16 0 0 0 0 48v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm400 400h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-296h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 192h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-96h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm-104 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM32 136H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm200 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 192h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-96h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM32 328H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-96H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm104 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM32 432H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm104 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm192 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm-96 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM136 32h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm192 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm-96 0h-16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" class=""></path></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'center-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path id="path" fill="currentColor" d=" M 825 150C 839 150 850 161 850 175C 850 175 850 225 850 225C 850 239 839 250 825 250C 825 250 175 250 175 250C 161 250 150 239 150 225C 150 225 150 175 150 175C 150 161 161 150 175 150C 175 150 825 150 825 150M 675 350C 689 350 700 361 700 375C 700 375 700 425 700 425C 700 439 689 450 675 450C 675 450 325 450 325 450C 311 450 300 439 300 425C 300 425 300 375 300 375C 300 361 311 350 325 350C 325 350 675 350 675 350M 825 550C 839 550 850 561 850 575C 850 575 850 625 850 625C 850 639 839 650 825 650C 825 650 175 650 175 650C 161 650 150 639 150 625C 150 625 150 575 150 575C 150 561 161 550 175 550C 175 550 825 550 825 550M 675 750C 689 750 700 761 700 775C 700 775 700 825 700 825C 700 839 689 850 675 850C 675 850 325 850 325 850C 311 850 300 839 300 825C 300 825 300 775 300 775C 300 761 311 750 325 750C 325 750 675 750 675 750" transform="rotate(180, 500, 500) "></path></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'center-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path id="path" fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0 M 825 150C 839 150 850 161 850 175C 850 175 850 225 850 225C 850 239 839 250 825 250C 825 250 175 250 175 250C 161 250 150 239 150 225C 150 225 150 175 150 175C 150 161 161 150 175 150C 175 150 825 150 825 150M 675 350C 689 350 700 361 700 375C 700 375 700 425 700 425C 700 439 689 450 675 450C 675 450 325 450 325 450C 311 450 300 439 300 425C 300 425 300 375 300 375C 300 361 311 350 325 350C 325 350 675 350 675 350M 825 550C 839 550 850 561 850 575C 850 575 850 625 850 625C 850 639 839 650 825 650C 825 650 175 650 175 650C 161 650 150 639 150 625C 150 625 150 575 150 575C 150 561 161 550 175 550C 175 550 825 550 825 550M 675 750C 689 750 700 761 700 775C 700 775 700 825 700 825C 700 839 689 850 675 850C 675 850 325 850 325 850C 311 850 300 839 300 825C 300 825 300 775 300 775C 300 761 311 750 325 750C 325 750 675 750 675 750" transform="translate(1000,0) scale(-1,1) rotate(180, 500, 500) "></path></svg>';
    content: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'zoom';
  &-#{$icon-name} {
    @extend .gf-icon;
    $encoded-color: $icon_color;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'comment-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 850 75C 891 75 925 109 925 150C 925 150 925 650 925 650C 925 691 891 725 850 725C 850 725 511 725 511 725C 511 725 344 916 344 916C 337 924 326 927 316 923C 306 920 300 910 300 900C 300 900 300 725 300 725C 300 725 150 725 150 725C 109 725 75 691 75 650C 75 650 75 150 75 150C 75 110 107 77 147 75C 148 75 149 75 150 75C 150 75 850 75 850 75M 125 150C 125 150 125 650 125 650C 125 664 136 675 150 675C 150 675 325 675 325 675C 339 675 350 686 350 700C 350 700 350 833 350 833C 350 833 481 684 481 684C 486 678 493 675 500 675C 500 675 850 675 850 675C 864 675 875 664 875 650C 875 650 875 150 875 150C 875 136 864 125 850 125C 850 125 150 125 150 125C 136 125 125 136 125 150C 125 150 125 150 125 150M 360 365C 370 374 375 387 375 400C 375 413 370 426 360 435C 351 445 338 450 325 450C 312 450 299 445 290 435C 280 426 275 413 275 400C 275 387 280 374 290 365C 299 355 312 350 325 350C 338 350 351 355 360 365C 360 365 360 365 360 365M 535 365C 545 374 550 387 550 400C 550 413 545 426 535 435C 526 445 513 450 500 450C 487 450 474 445 465 435C 455 426 450 413 450 400C 450 387 455 374 465 365C 474 355 487 350 500 350C 513 350 526 355 535 365C 535 365 535 365 535 365M 710 365C 720 374 725 387 725 400C 725 413 720 426 710 435C 701 445 688 450 675 450C 662 450 649 445 640 435C 630 426 625 413 625 400C 625 387 630 374 640 365C 649 355 662 350 675 350C 688 350 701 355 710 365C 710 365 710 365 710 365"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'comment-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $encoded-color: $icon_color;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 35 0 35C 0 35 965 1000 965 1000C 965 1000 1000 1000 1000 1000C 1000 1000 1000 965 1000 965C 1000 965 35 0 35 0C 35 0 0 0 0 0C 0 0 0 0 0 0M 850 75C 891 75 925 109 925 150C 925 150 925 650 925 650C 925 691 891 725 850 725C 850 725 511 725 511 725C 511 725 344 916 344 916C 337 924 326 927 316 923C 306 920 300 910 300 900C 300 900 300 725 300 725C 300 725 150 725 150 725C 109 725 75 691 75 650C 75 650 75 150 75 150C 75 110 107 77 147 75C 148 75 149 75 150 75C 150 75 850 75 850 75M 125 150C 125 150 125 650 125 650C 125 664 136 675 150 675C 150 675 325 675 325 675C 339 675 350 686 350 700C 350 700 350 833 350 833C 350 833 481 684 481 684C 486 678 493 675 500 675C 500 675 850 675 850 675C 864 675 875 664 875 650C 875 650 875 150 875 150C 875 136 864 125 850 125C 850 125 150 125 150 125C 136 125 125 136 125 150C 125 150 125 150 125 150M 360 365C 370 374 375 387 375 400C 375 413 370 426 360 435C 351 445 338 450 325 450C 312 450 299 445 290 435C 280 426 275 413 275 400C 275 387 280 374 290 365C 299 355 312 350 325 350C 338 350 351 355 360 365C 360 365 360 365 360 365M 535 365C 545 374 550 387 550 400C 550 413 545 426 535 435C 526 445 513 450 500 450C 487 450 474 445 465 435C 455 426 450 413 450 400C 450 387 455 374 465 365C 474 355 487 350 500 350C 513 350 526 355 535 365C 535 365 535 365 535 365M 710 365C 720 374 725 387 725 400C 725 413 720 426 710 435C 701 445 688 450 675 450C 662 450 649 445 640 435C 630 426 625 413 625 400C 625 387 630 374 640 365C 649 355 662 350 675 350C 688 350 701 355 710 365C 710 365 710 365 710 365" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'file-text';
  &-#{$icon-name} {
    @extend .gf-icon;
    width: 12px;
    height: 16px;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'file-download';
  &-#{$icon-name} {
    @extend .gf-icon;
    $encoded-color: $icon_color;
    width: 12px;
    height: 16px;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M216 236.07c0-6.63-5.37-12-12-12h-24c-6.63 0-12 5.37-12 12v84.01h-48.88c-10.71 0-16.05 12.97-8.45 20.52l72.31 71.77c4.99 4.95 13.04 4.95 18.03 0l72.31-71.77c7.6-7.54 2.26-20.52-8.45-20.52H216v-84.01zM369.83 97.98L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zM255.95 51.99l76.09 76.08h-76.09V51.99zM336 464.01H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v287.95z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'csv';
  &-#{$icon-name} {
    @extend .gf-icon;
    $encoded-color: $icon_color;
    width: 12px;
    height: 16px;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M369.83 97.98L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zM255.95 51.99l76.09 76.08h-76.09V51.99zM336 464.01H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v287.95zM224 264v20.8c0 35.48 12.88 68.89 36.28 94.09 3.02 3.25 7.27 5.11 11.72 5.11s8.7-1.86 11.72-5.11c23.41-25.2 36.28-58.61 36.28-94.09V264c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v20.8c0 20.27-5.7 40.17-16 56.88-10.3-16.7-16-36.61-16-56.88V264c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8zm-104-8h-8c-26.51 0-48 21.49-48 48v32c0 26.51 21.49 48 48 48h8c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-8c-8.84 0-16-7.16-16-16v-32c0-8.84 7.16-16 16-16h8c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zm59.45 42.47c-1.38-1.19-2.12-2.55-2.12-3.84 0-3.12 4.45-6.62 10.41-6.62H200c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-12.27c-23.39 0-42.41 17.33-42.41 38.62 0 10.66 4.86 20.92 13.33 28.14l21.89 18.77c1.38 1.19 2.12 2.55 2.12 3.84 0 3.12-4.45 6.62-10.41 6.62H160c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h12.27c23.39 0 42.41-17.33 42.41-38.62 0-10.66-4.86-20.92-13.33-28.14l-21.9-18.77z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'xml';
  &-#{$icon-name} {
    @extend .gf-icon;
    $encoded-color: $icon_color;
    width: 12px;
    height: 16px;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M149.9 349.1l-.2-.2-32.8-28.9 32.8-28.9c3.6-3.2 4-8.8.8-12.4l-.2-.2-17.4-18.6c-3.4-3.6-9-3.7-12.4-.4l-57.7 54.1c-3.7 3.5-3.7 9.4 0 12.8l57.7 54.1c1.6 1.5 3.8 2.4 6 2.4 2.4 0 4.8-1 6.4-2.8l17.4-18.6c3.3-3.5 3.1-9.1-.4-12.4zm220-251.2L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h160v104c0 13.3 10.7 24 24 24h104zM209.6 214c-4.7-1.4-9.5 1.3-10.9 6L144 408.1c-1.4 4.7 1.3 9.6 6 10.9l24.4 7.1c4.7 1.4 9.6-1.4 10.9-6L240 231.9c1.4-4.7-1.3-9.6-6-10.9zm24.5 76.9l.2.2 32.8 28.9-32.8 28.9c-3.6 3.2-4 8.8-.8 12.4l.2.2 17.4 18.6c3.3 3.5 8.9 3.7 12.4.4l57.7-54.1c3.7-3.5 3.7-9.4 0-12.8l-57.7-54.1c-3.5-3.3-9.1-3.2-12.4.4l-17.4 18.6c-3.3 3.5-3.1 9.1.4 12.4z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'anim-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 559 263C 616 263 663 309 663 366C 663 366 663 634 663 634C 663 691 616 738 559 738C 559 738 216 738 216 738C 159 738 113 691 113 634C 113 634 113 366 113 366C 113 309 159 263 216 263C 216 263 559 263 559 263M 887 325C 887 325 887 675 887 675C 887 689 879 703 866 709C 853 715 838 713 827 704C 827 704 702 604 702 604C 693 597 688 586 688 575C 688 575 688 425 688 425C 688 414 693 403 702 396C 702 396 827 296 827 296C 833 291 841 288 849 288C 849 288 850 288 850 288C 871 287 887 304 887 325C 887 325 887 325 887 325"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'anim-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0M 559 263C 616 263 663 309 663 366C 663 366 663 634 663 634C 663 691 616 738 559 738C 559 738 216 738 216 738C 159 738 113 691 113 634C 113 634 113 366 113 366C 113 309 159 263 216 263C 216 263 559 263 559 263M 887 325C 887 325 887 675 887 675C 887 689 879 703 866 709C 853 715 838 713 827 704C 827 704 702 604 702 604C 693 597 688 586 688 575C 688 575 688 425 688 425C 688 414 693 403 702 396C 702 396 827 296 827 296C 833 291 841 288 849 288C 849 288 850 288 850 288C 871 287 887 304 887 325C 887 325 887 325 887 325" transform="translate(1000,0) scale(-1,1)rotate(180,500,500)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'graph-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0M 800 113C 862 113 912 163 912 225C 912 234 911 243 909 251C 909 251 1000 309 1000 309C 1000 309 1000 399 1000 399C 1000 399 869 314 869 314C 850 329 826 337 800 337C 791 337 783 337 775 335C 775 335 588 631 588 631C 603 650 613 674 613 700C 613 762 562 812 500 812C 438 812 387 762 387 700C 387 693 388 686 390 679C 390 679 273 611 273 611C 253 627 228 638 200 638C 180 638 161 632 144 622C 144 622 0 746 0 746C 0 746 0 647 0 647C 0 647 95 566 95 566C 90 553 88 539 88 525C 88 463 138 412 200 412C 262 412 312 463 312 525C 312 532 312 539 310 546C 310 546 427 614 427 614C 447 598 472 588 500 588C 509 588 517 588 525 590C 525 590 712 294 712 294C 697 275 688 251 688 225C 688 163 738 113 800 113C 800 113 800 113 800 113" transform="translate(1000,0) scale(-1,1)rotate(180,500,500)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'graph-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 800 113C 862 113 912 163 912 225C 912 234 911 243 909 251C 909 251 1000 309 1000 309C 1000 309 1000 399 1000 399C 1000 399 869 314 869 314C 850 329 826 337 800 337C 791 337 783 337 775 335C 775 335 588 631 588 631C 603 650 613 674 613 700C 613 762 562 812 500 812C 438 812 387 762 387 700C 387 693 388 686 390 679C 390 679 273 611 273 611C 253 627 228 638 200 638C 180 638 161 632 144 622C 144 622 0 746 0 746C 0 746 0 647 0 647C 0 647 95 566 95 566C 90 553 88 539 88 525C 88 463 138 412 200 412C 262 412 312 463 312 525C 312 532 312 539 310 546C 310 546 427 614 427 614C 447 598 472 588 500 588C 509 588 517 588 525 590C 525 590 712 294 712 294C 697 275 688 251 688 225C 688 163 738 113 800 113C 800 113 800 113 800 113" transform="translate(1000,0) scale(-1,1)rotate(180,500,500)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'picture';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'fillColor';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'strokeColor';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'gradientColor';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 48c0-8.84-7.16-16-16-16h-48c-48.6 0-88 39.4-88 88v48H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h56v144c0 22.09-17.91 40-40 40H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h16c48.6 0 88-39.4 88-88V216h56c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-48c0-22.09 17.91-40 40-40h48c8.84 0 16-7.16 16-16V48zm93.43 60.92l-12.8-9.63c-7.22-5.44-17.81-4.01-22.92 3.41C244.39 157 224 222.17 224 288c0 65.85 20.39 131.02 57.71 185.3 5.11 7.43 15.7 8.85 22.92 3.41l12.8-9.63c6.84-5.14 8.09-14.54 3.28-21.59C289.2 399.27 272 343.92 272 288c0-55.91 17.2-111.26 48.71-157.5 4.8-7.05 3.55-16.44-3.28-21.58zm264.86-6.22c-5.11-7.43-15.7-8.85-22.92-3.41l-12.8 9.63c-6.84 5.14-8.09 14.54-3.28 21.59C574.8 176.73 592 232.08 592 288c0 55.91-17.2 111.26-48.71 157.5-4.8 7.05-3.55 16.44 3.28 21.59l12.8 9.63c7.22 5.44 17.81 4.02 22.92-3.41C619.61 419 640 353.83 640 288c0-65.85-20.39-131.02-57.71-185.3zm-74.84 120.84l-10.99-10.99c-6.07-6.07-15.91-6.07-21.98 0L432 255.03l-42.47-42.47c-6.07-6.07-15.91-6.07-21.98 0l-10.99 10.99c-6.07 6.07-6.07 15.91 0 21.98L399.03 288l-42.47 42.47c-6.07 6.07-6.07 15.91 0 21.98l10.99 10.99c6.07 6.07 15.91 6.07 21.98 0L432 320.97l42.47 42.47c6.07 6.07 15.91 6.07 21.98 0l10.99-10.99c6.07-6.07 6.07-15.91 0-21.98L464.97 288l42.47-42.47c6.08-6.07 6.08-15.92.01-21.99z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'labelBackgroundColor';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-82.3 364.2c-8.5 9.1-31.2 19.8-60.9 19.8-75.5 0-91.9-55.5-91.9-87.9v-90h-29.7c-3.4 0-6.2-2.8-6.2-6.2v-42.5c0-4.5 2.8-8.5 7.1-10 38.8-13.7 50.9-47.5 52.7-73.2.5-6.9 4.1-10.2 10-10.2h44.3c3.4 0 6.2 2.8 6.2 6.2v72h51.9c3.4 0 6.2 2.8 6.2 6.2v51.1c0 3.4-2.8 6.2-6.2 6.2h-52.1V321c0 21.4 14.8 33.5 42.5 22.4 3-1.2 5.6-2 8-1.4 2.2.5 3.6 2.1 4.6 4.9l13.8 40.2c1 3.2 2 6.7-.3 9.1z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'fontColor';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M229.88 85.69A32 32 0 0 0 199.58 64h-47.16a32 32 0 0 0-30.3 21.69L.85 426.89A16 16 0 0 0 16 448h50.62a16 16 0 0 0 15.16-10.89L100.85 384h150.3l19.07 53.11A16 16 0 0 0 285.38 448H336a16 16 0 0 0 15.16-21.11zM129.58 304L176 174.74 222.42 304zM624 160h-32a16 16 0 0 0-16 16v1.81c-18.9-11-40.58-17.81-64-17.81a128.14 128.14 0 0 0-128 128v32a128.14 128.14 0 0 0 128 128c23.42 0 45.1-6.78 64-17.81V432a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16zm-64 160a48 48 0 0 1-96 0v-32a48 48 0 0 1 96 0z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'target';
  &-#{$icon-name} {
    @extend .gf-icon-marker;
    // @extend .gf-icon-target2;
  }

  $icon-name: 'target2';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M242.16 240.67L27.98 301.55c-15.17 4.31-16.95 25.1-2.73 31.92l68.47 32.89-89.17 89.17c-6.07 6.06-6.07 15.9 0 21.96l21.96 21.96c6.07 6.06 15.9 6.06 21.96 0l89.17-89.17 32.89 68.47c6.83 14.22 27.61 12.44 31.92-2.73l60.87-214.18c3.68-12.91-8.25-24.83-21.16-21.17zm27.36 117.03l-14.08 49.55C335.92 403.3 400 337.46 400 256c0-84.02-68-152-152-152-81.47 0-147.3 64.1-151.25 144.57l49.55-14.08C156.25 187.44 198.04 152 248 152c57.35 0 104 46.65 104 104 0 49.96-35.44 91.75-82.48 101.7zM248 8C111.03 8 0 119.03 0 256c0 7.3.47 14.49 1.09 21.63 3.46-1.97 7-3.87 10.99-5l36.24-10.3c-.07-2.12-.32-4.19-.32-6.33 0-110.28 89.72-200 200-200s200 89.72 200 200-89.72 200-200 200c-2.14 0-4.21-.25-6.33-.32l-10.3 36.24c-1.14 4.02-3.15 7.5-5.14 10.98 7.19.63 14.42 1.1 21.77 1.1 136.97 0 248-111.03 248-248S384.97 8 248 8z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'lock-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 500 171C 499 171 499 171 498 171C 417 172 351 239 350 325C 350 325 350 462 350 462C 350 462 650 462 650 462C 650 462 650 325 650 325C 650 325 650 325 650 325C 650 324 650 323 650 322C 647 236 580 171 500 171C 500 171 500 171 500 171M 500 71C 634 71 745 181 750 318C 750 320 750 323 750 325C 750 325 750 325 750 325C 750 325 750 463 750 463C 784 464 812 493 812 528C 812 528 812 872 812 872C 812 908 783 937 747 937C 747 937 253 937 253 937C 217 937 188 908 188 872C 188 872 188 528 188 528C 188 493 216 464 250 463C 250 463 250 325 250 325C 250 325 250 325 250 325C 250 325 250 325 250 324C 252 187 361 73 497 71C 498 71 499 71 500 71C 500 71 500 71 500 71"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'lock-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0M 500 171C 499 171 499 171 498 171C 417 172 351 239 350 325C 350 325 350 462 350 462C 350 462 650 462 650 462C 650 462 650 325 650 325C 650 325 650 325 650 325C 650 324 650 323 650 322C 647 236 580 171 500 171C 500 171 500 171 500 171M 500 71C 634 71 745 181 750 318C 750 320 750 323 750 325C 750 325 750 325 750 325C 750 325 750 463 750 463C 784 464 812 493 812 528C 812 528 812 872 812 872C 812 908 783 937 747 937C 747 937 253 937 253 937C 217 937 188 908 188 872C 188 872 188 528 188 528C 188 493 216 464 250 463C 250 463 250 325 250 325C 250 325 250 325 250 325C 250 325 250 325 250 324C 252 187 361 73 497 71C 498 71 499 71 500 71C 500 71 500 71 500 71" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'edit';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'undo';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 563 75C 563 75 563 118 563 118C 755 149 897 321 887 518C 877 728 702 891 493 887C 283 883 115 713 113 504C 112 483 129 466 150 465C 171 465 188 482 188 503C 189 673 325 809 494 812C 664 816 804 684 812 515C 820 359 712 224 563 194C 563 194 563 225 563 225C 562 240 553 254 539 260C 525 265 509 262 498 252C 498 252 423 177 423 177C 409 162 409 138 423 123C 423 123 498 48 498 48C 505 42 514 38 524 38C 545 37 562 54 563 75C 563 75 563 75 563 75"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'shape';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M128,256A128,128,0,1,0,256,384,128,128,0,0,0,128,256Zm379-54.86L400.07,18.29a37.26,37.26,0,0,0-64.14,0L229,201.14C214.76,225.52,232.58,256,261.09,256H474.91C503.42,256,521.24,225.52,507,201.14ZM480,288H320a32,32,0,0,0-32,32V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V320A32,32,0,0,0,480,288Z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'remove';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="css-4fl056"><path d="M10,18a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,10,18ZM20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Zm-3-1a1,1,0,0,0,1-1V11a1,1,0,0,0-2,0v6A1,1,0,0,0,14,18Z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'show';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="css-4fl056"><path d="M21.92,11.6C19.9,6.91,16.1,4,12,4S4.1,6.91,2.08,11.6a1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20s7.9-2.91,9.92-7.6A1,1,0,0,0,21.92,11.6ZM12,18c-3.17,0-6.17-2.29-7.9-6C5.83,8.29,8.83,6,12,6s6.17,2.29,7.9,6C18.17,15.71,15.17,18,12,18ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'hide';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.94,6.08A6.93,6.93,0,0,1,12,6c3.18,0,6.17,2.29,7.91,6a15.23,15.23,0,0,1-.9,1.64,1,1,0,0,0-.16.55,1,1,0,0,0,1.86.5,15.77,15.77,0,0,0,1.21-2.3,1,1,0,0,0,0-.79C19.9,6.91,16.1,4,12,4a7.77,7.77,0,0,0-1.4.12,1,1,0,1,0,.34,2ZM3.71,2.29A1,1,0,0,0,2.29,3.71L5.39,6.8a14.62,14.62,0,0,0-3.31,4.8,1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20a9.26,9.26,0,0,0,5.05-1.54l3.24,3.25a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Zm6.36,9.19,2.45,2.45A1.81,1.81,0,0,1,12,14a2,2,0,0,1-2-2A1.81,1.81,0,0,1,10.07,11.48ZM12,18c-3.18,0-6.17-2.29-7.9-6A12.09,12.09,0,0,1,6.8,8.21L8.57,10A4,4,0,0,0,14,15.43L15.59,17A7.24,7.24,0,0,1,12,18Z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'clone';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><path fill="currentColor" d="M21,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.32.32,0,0,0-.09,0A.88.88,0,0,0,14.05,2H10A3,3,0,0,0,7,5V6H6A3,3,0,0,0,3,9V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V18h1a3,3,0,0,0,3-3V9S21,9,21,8.94ZM15,5.41,17.59,8H16a1,1,0,0,1-1-1ZM15,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V9A1,1,0,0,1,6,8H7v7a3,3,0,0,0,3,3h5Zm4-4a1,1,0,0,1-1,1H10a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h3V7a3,3,0,0,0,3,3h3Z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'moveUp';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 527 223C 527 223 677 373 677 373C 687 384 690 400 685 414C 679 428 665 437 650 438C 650 438 538 438 538 438C 538 438 538 750 538 750C 538 771 521 788 500 788C 479 788 462 771 463 750C 463 750 463 438 463 438C 463 438 350 438 350 438C 335 437 321 428 315 414C 310 400 313 384 323 373C 323 373 473 223 473 223C 480 217 490 213 499 213C 510 212 519 216 527 223C 527 223 527 223 527 223"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'moveDown';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 527 223C 527 223 677 373 677 373C 687 384 690 400 685 414C 679 428 665 437 650 438C 650 438 538 438 538 438C 538 438 538 750 538 750C 538 771 521 788 500 788C 479 788 462 771 463 750C 463 750 463 438 463 438C 463 438 350 438 350 438C 335 437 321 428 315 414C 310 400 313 384 323 373C 323 373 473 223 473 223C 480 217 490 213 499 213C 510 212 519 216 527 223C 527 223 527 223 527 223" transform="rotate(180,500,500)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'address-on';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 922 113C 958 113 987 142 987 178C 987 178 987 797 987 797C 987 833 958 862 922 862C 922 862 78 862 78 862C 42 862 13 833 13 797C 13 797 13 178 13 178C 13 142 42 113 78 113C 78 113 922 113 922 113M 88 788C 88 788 912 788 912 788C 912 788 912 188 912 188C 912 188 88 188 88 188C 88 188 88 788 88 788M 420 289C 446 316 461 352 461 389C 461 428 445 464 419 490C 450 494 478 507 499 528C 525 556 538 594 538 636C 538 636 538 678 538 678C 538 721 501 757 458 757C 458 757 181 757 181 757C 137 757 101 721 101 678C 101 678 101 636 101 636C 101 594 115 555 142 528C 162 507 190 495 220 490C 194 464 178 429 178 389C 178 352 193 316 219 289C 246 263 282 248 319 248C 357 248 393 263 420 289C 420 289 420 289 420 289M 825 312C 846 312 863 329 863 350C 863 371 846 388 825 387C 825 387 600 387 600 387C 579 388 562 371 562 350C 562 329 579 312 600 312C 600 312 825 312 825 312M 272 342C 260 355 253 372 253 389C 253 427 282 456 319 456C 357 456 386 427 386 389C 386 372 379 355 367 342C 354 330 337 323 319 323C 302 323 285 330 272 342C 272 342 272 342 272 342M 825 437C 846 437 863 454 863 475C 863 496 846 513 825 512C 825 512 600 512 600 512C 579 513 562 496 562 475C 562 454 579 437 600 437C 600 437 825 437 825 437M 825 563C 846 562 863 579 863 600C 863 621 846 638 825 638C 782 638 686 638 600 638C 579 638 562 621 562 600C 562 579 579 562 600 563C 686 563 782 563 825 563C 825 563 825 563 825 563M 355 573C 343 575 332 576 319 576C 307 576 296 575 285 573C 275 571 264 567 246 563C 221 563 205 571 195 581C 184 592 176 609 176 636C 176 636 176 678 176 678C 176 681 177 682 181 682C 181 682 458 682 458 682C 461 682 462 681 462 678C 462 678 462 636 462 636C 462 608 455 591 445 581C 435 570 420 563 396 563C 377 567 365 571 355 573C 355 573 355 573 355 573" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'address-off';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 0 0C 0 0 0 53 0 53C 0 53 947 1000 947 1000C 947 1000 1000 1000 1000 1000C 1000 1000 1000 947 1000 947C 1000 947 53 0 53 0C 53 0 0 0 0 0C 0 0 0 0 0 0M 922 113C 958 113 987 142 987 178C 987 178 987 797 987 797C 987 833 958 862 922 862C 922 862 78 862 78 862C 42 862 13 833 13 797C 13 797 13 178 13 178C 13 142 42 113 78 113C 78 113 922 113 922 113M 88 788C 88 788 912 788 912 788C 912 788 912 188 912 188C 912 188 88 188 88 188C 88 188 88 788 88 788M 420 289C 446 316 461 352 461 389C 461 428 445 464 419 490C 450 494 478 507 499 528C 525 556 538 594 538 636C 538 636 538 678 538 678C 538 721 501 757 458 757C 458 757 181 757 181 757C 137 757 101 721 101 678C 101 678 101 636 101 636C 101 594 115 555 142 528C 162 507 190 495 220 490C 194 464 178 429 178 389C 178 352 193 316 219 289C 246 263 282 248 319 248C 357 248 393 263 420 289C 420 289 420 289 420 289M 825 312C 846 312 863 329 863 350C 863 371 846 388 825 387C 825 387 600 387 600 387C 579 388 562 371 562 350C 562 329 579 312 600 312C 600 312 825 312 825 312M 272 342C 260 355 253 372 253 389C 253 427 282 456 319 456C 357 456 386 427 386 389C 386 372 379 355 367 342C 354 330 337 323 319 323C 302 323 285 330 272 342C 272 342 272 342 272 342M 825 437C 846 437 863 454 863 475C 863 496 846 513 825 512C 825 512 600 512 600 512C 579 513 562 496 562 475C 562 454 579 437 600 437C 600 437 825 437 825 437M 825 563C 846 562 863 579 863 600C 863 621 846 638 825 638C 782 638 686 638 600 638C 579 638 562 621 562 600C 562 579 579 562 600 563C 686 563 782 563 825 563C 825 563 825 563 825 563M 355 573C 343 575 332 576 319 576C 307 576 296 575 285 573C 275 571 264 567 246 563C 221 563 205 571 195 581C 184 592 176 609 176 636C 176 636 176 678 176 678C 176 681 177 682 181 682C 181 682 458 682 458 682C 461 682 462 681 462 678C 462 678 462 636 462 636C 462 608 455 591 445 581C 435 570 420 563 396 563C 377 567 365 571 355 573C 355 573 355 573 355 573" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'location';
  &-#{$icon-name} {
    // @extend .gf-icon-location2;
    @extend .gf-icon-marker-map;
  }

  $icon-name: 'location2';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 500 88C 564 88 628 108 680 144C 794 222 843 379 794 507C 744 612 693 716 643 821C 617 870 601 930 548 957C 494 988 426 956 398 904C 340 788 285 670 228 553C 187 480 176 390 201 309C 237 182 362 88 494 88C 496 88 498 88 500 88C 500 88 500 88 500 88M 500 162C 456 162 413 175 376 198C 281 253 237 379 277 481C 336 607 398 732 458 857C 467 894 519 909 536 868C 593 752 649 636 705 519C 733 471 745 413 734 358C 716 249 613 162 503 162C 502 162 501 162 500 162C 500 162 500 162 500 162M 613 400C 613 462 562 512 500 512C 438 512 387 462 387 400C 387 338 438 287 500 287C 562 287 613 338 613 400C 613 400 613 400 613 400M 462 400C 462 421 479 437 500 437C 521 437 538 421 538 400C 538 379 521 362 500 362C 479 362 462 379 462 400C 462 400 462 400 462 400"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-less-than-wide
  $icon-name: 'comp-lt';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 675 287C 675 287 675 287 675 287C 692 287 708 299 712 316C 716 333 707 351 692 359C 692 359 409 500 409 500C 409 500 692 641 692 641C 704 647 712 659 713 673C 713 686 707 699 696 707C 684 714 670 715 658 709C 658 709 308 534 308 534C 295 527 287 514 287 500C 287 486 295 473 308 466C 308 466 658 291 658 291C 663 289 669 287 675 287" /></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-less-than-equal-wide
  $icon-name: 'comp-le';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 675 237C 675 237 675 237 675 237C 693 237 708 249 712 266C 716 283 708 301 692 309C 692 309 409 450 409 450C 409 450 692 592 692 592C 704 597 712 609 713 623C 714 636 707 649 696 657C 685 664 670 665 658 659C 658 659 308 484 308 484C 296 477 288 464 288 450C 288 436 296 423 308 417C 308 417 658 242 658 242C 663 239 669 237 675 237M 325 688C 325 688 325 688 325 688C 325 688 675 688 675 688C 689 687 701 695 708 706C 715 718 715 732 708 744C 701 756 689 763 675 763C 675 763 325 763 325 763C 311 763 299 756 292 744C 285 732 285 718 292 706C 299 695 311 687 325 688" /></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-equal
  $icon-name: 'comp-eq';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 325 563C 325 563 325 563 325 563C 325 563 675 563 675 563C 689 562 701 569 708 581C 715 593 715 607 708 619C 701 631 689 638 675 638C 675 638 325 638 325 638C 311 638 299 631 292 619C 285 607 285 593 292 581C 299 569 311 562 325 563M 325 362C 325 362 325 362 325 362C 325 362 675 362 675 362C 689 362 701 369 708 381C 715 393 715 407 708 419C 701 431 689 438 675 437C 675 437 325 437 325 437C 311 438 299 431 292 419C 285 407 285 393 292 381C 299 369 311 362 325 362" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-not-equal
  $icon-name: 'comp-ne';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 658 293C 658 293 619 362 619 362C 619 362 675 362 675 362C 689 362 701 369 708 381C 715 393 715 407 708 419C 701 431 689 438 675 437C 675 437 578 437 578 437C 578 437 508 563 508 563C 508 563 675 563 675 563C 689 562 701 569 708 581C 715 593 715 607 708 619C 701 631 689 638 675 638C 675 638 467 638 467 638C 467 638 408 743 408 743C 408 743 342 707 342 707C 342 707 381 638 381 638C 381 638 325 638 325 638C 311 638 299 631 292 619C 285 607 285 593 292 581C 299 569 311 562 325 563C 325 563 422 563 422 563C 422 563 492 437 492 437C 492 437 325 437 325 437C 311 438 299 431 292 419C 285 407 285 393 292 381C 299 369 311 362 325 362C 325 362 533 362 533 362C 533 362 592 257 592 257C 592 257 658 293 658 293"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-less-than-equal-wide
  $icon-name: 'comp-ge';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 675 237C 675 237 675 237 675 237C 693 237 708 249 712 266C 716 283 708 301 692 309C 692 309 409 450 409 450C 409 450 692 592 692 592C 704 597 712 609 713 623C 714 636 707 649 696 657C 685 664 670 665 658 659C 658 659 308 484 308 484C 296 477 288 464 288 450C 288 436 296 423 308 417C 308 417 658 242 658 242C 663 239 669 237 675 237M 325 688C 325 688 325 688 325 688C 325 688 675 688 675 688C 689 687 701 695 708 706C 715 718 715 732 708 744C 701 756 689 763 675 763C 675 763 325 763 325 763C 311 763 299 756 292 744C 285 732 285 718 292 706C 299 695 311 687 325 688" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-xwluhl-greater-than-wide
  $icon-name: 'comp-gt';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 675 287C 675 287 675 287 675 287C 692 287 708 299 712 316C 716 333 707 351 692 359C 692 359 409 500 409 500C 409 500 692 641 692 641C 704 647 712 659 713 673C 713 686 707 699 696 707C 684 714 670 715 658 709C 658 709 308 534 308 534C 295 527 287 514 287 500C 287 486 295 473 308 466C 308 466 658 291 658 291C 663 289 669 287 675 287" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  //fi-swluxl-less-than-wide
  $icon-name: 'comp-al';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 300 350C 300 350 300 350 300 350C 345 350 383 369 418 395C 447 416 473 441 500 466C 526 442 553 417 581 395C 616 370 655 350 700 350C 785 350 849 419 850 500C 851 581 785 650 700 650C 618 650 556 586 500 534C 444 587 382 650 300 650C 218 650 149 582 150 500C 151 418 217 351 300 350M 300 400C 300 400 300 400 300 400C 245 400 200 446 200 500C 200 554 246 600 300 600C 353 600 407 551 463 500C 437 476 412 453 388 435C 358 413 330 400 300 400M 700 400C 700 400 700 400 700 400C 670 400 641 413 611 436C 587 453 562 476 537 500C 593 550 647 600 700 600C 759 600 800 556 800 500C 800 444 759 400 700 400"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'comp-tilda';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M316.25 350.67c-31.48-4.74-58.98-24.08-77.7-49.83l-70.96-97.62c-19.2-26.36-56.6-36.33-87.97-17.5C59.2 197.99 48 221.37 48 245.19V304c0 8.84-7.16 16-16 16H16c-8.84 0-16-7.16-16-16v-56.21c0-46.29 25.01-90.77 67.26-109.69 51.3-22.97 108.58-5.14 139.15 36.88l74 101.8c19.2 26.36 56.6 36.33 87.97 17.5C388.8 282.02 400 258.63 400 234.81V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v61.89c0 68.71-61.03 123.42-131.75 112.78z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'new';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 200 450C 200 435 210 425 225 425C 225 425 425 425 425 425C 425 425 425 225 425 225C 425 210 435 200 450 200C 450 200 550 200 550 200C 565 200 575 210 575 225C 575 225 575 425 575 425C 575 425 775 425 775 425C 790 425 800 435 800 450C 800 450 800 550 800 550C 800 565 790 575 775 575C 775 575 575 575 575 575C 575 575 575 775 575 775C 575 790 565 800 550 800C 550 800 450 800 450 800C 435 800 425 790 425 775C 425 775 425 575 425 575C 425 575 225 575 225 575C 210 575 200 565 200 550C 200 550 200 450 200 450"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  // https://friconix.com/icon/fi-cnpuhl-circle/
  $icon-name: 'circle-empty';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 500 0C 224 0 0 224 0 500C 0 776 224 1000 500 1000C 776 1000 1000 776 1000 500C 1000 224 776 0 500 0C 500 0 500 0 500 0M 500 50C 749 50 950 251 950 500C 950 749 749 950 500 950C 251 950 50 749 50 500C 50 251 251 50 500 50C 500 50 500 50 500 50M 0,0"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  // https://friconix.com/icon/fi-cnpuhl-circle/
  $icon-name: 'circle-slashed';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 500 0C 224 0 0 224 0 500C 0 776 224 1000 500 1000C 776 1000 1000 776 1000 500C 1000 224 776 0 500 0C 500 0 500 0 500 0M 500 50C 749 50 950 251 950 500C 950 615 907 720 835 800C 835 800 200 165 200 165C 280 93 385 50 500 50C 500 50 500 50 500 50M 165 200C 165 200 800 835 800 835C 720 907 615 950 500 950C 251 950 50 749 50 500C 50 385 93 280 165 200C 165 200 165 200 165 200M 0,0" transform="translate(1000,0) scale(-1,1)"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  // https://friconix.com/icon/fi-xwsuxl-check/
  // checked
  // Apply
  $icon-name: 'check';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 250 475C 279 504 359 586 390 615C 400 625 410 615 410 615C 410 615 625 400 750 275C 765 260 785 260 800 275C 816 292 837 313 850 325C 865 340 865 360 850 375C 700 525 583 642 425 800C 410 815 390 815 375 800C 292 717 150 575 150 575C 135 560 135 540 150 525C 150 525 200 475 200 475C 215 461 235 460 250 475C 250 475 250 475 250 475"/></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'marker';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" class=""></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'marker-map';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }

  $icon-name: 'marker-edit';
  &-#{$icon-name} {
    @extend .gf-icon;
    $source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M192 0C86.4 0 0 86.4 0 192c0 76.8 25.6 99.2 172.8 310.4 9.6 12.8 28.8 12.8 38.4 0C358.4 291.2 384 268.8 384 192 384 86.4 297.6 0 192 0zm-43.17 283.15l-42.83 4.8c-5.78.62-10.57-4.27-9.95-9.95l4.8-42.83 85.54-85.54 47.98 47.98-85.54 85.54zm133.91-133.9l-28.26 28.26-47.98-47.98 28.26-28.26c7.02-7.02 18.39-7.02 25.41 0l22.57 22.57c7.02 7.01 7.02 18.39 0 25.41z"></path></svg>';
    background-image: url(svg-encode(str-replace($source, 'currentColor', $encoded-color)));
  }
}
